<script lang="ts" setup>
import Product from './Product.vue'
import XLoadMore from '@/components/XLoadMore.vue'
import {queryPlayRecordPage} from '@/api/user'
import type {IPlayRecord} from '@/typings/interface'

let end = $ref(false)
let playRecordPage = $ref<IPlayRecord[]>([])
let status = $ref<'more' | 'loading' | 'nomore'>('more')

const pageSize = $ref({
    page: 1,
    size: 4
})

const {isLogin} = $(useUser())

// 请求数据
async function sendRequest() {
    return (await queryPlayRecordPage(pageSize))?.data?.current_data
}

// 页面加载
onShow(() => {
    if (isLogin) {
        pageSize.page = 1
        sendRequest().then(data => (playRecordPage = data))
    }
})

// 设置滑动监听
uni.$on('studyLoadMore', () => {
    if (end) {
        status = 'nomore'
        return
    }
    pageSize.page = pageSize.page + 1
    status = 'loading'
    sendRequest().then((data) => {
        playRecordPage = playRecordPage.concat(data)
        status = 'more'
        if (data.length < 12) {
            end = true
            status = 'nomore'
        }
    })
})
</script>

<template>
    <view class="container">
        <view v-if="isLogin" mb-3>
            <view v-if="playRecordPage.length > 0">
                <!-- 课程列表 -->
                <view class="products">
                    <Product v-for="item in playRecordPage" :key="item.id" :product="item"/>
                </view>

                <view mb-3>
                    <XLoadMore :status="status"/>
                </view>
            </view>
            <view v-else>
                暂无数据
            </view>
        </view>
        <text v-else w-full center mt-3>
            请先登录
        </text>
    </view>
</template>

<style lang="scss" scoped>
.container {

    .tab_top {
        width: 100%;
        display: flex;
        background-color: white;
    }

    .products {
        padding: 0 20rpx;
        margin-top: 45rpx;
    }
}
</style>
